<template>
	<view class="business">
		<view class="headtop">
			<view class="headtitile">
				<image src="../../static/images/left.png" @click="fanhui"></image>
				<text>商家详情</text>
			</view>
		</view>
		<view class="container">
			<view class="section">
				<view class="section-title">基本信息</view>
				<view class="section-content">
					<view class="form-item">
						<text class="label">店铺名称</text>
						<input type="text" placeholder="请输入" placeholder-style="color:#ABB0CC" class="input"
							v-model="formData.shop_name" />
					</view>
					<view class="form-item">
						<text class="label">店铺地址</text>
						<view class="xuanze" @click="chooseLocation">
							<view class="name">{{formData.shop_address}}</view>
							<image src="../../static/images/right.png" class="tb"></image>
						</view>
					</view>
					<view class="form-item">
						<text class="label">分类</text>
						<view class="xuanze" @click="hidden = true">
							<view class="name">{{fenlei_name}}</view>
							<image src="../../static/images/right.png" class="tb"></image>
						</view>
					</view>
					<view class="form-items">
						<text class="label">营业执照照片</text>
						<view class="upload-area">
							<view class="upload-tip">
								新办理的营业执照，因国家市场监督管理总局信息更新有延迟，建议在办理成功后等待至少14个工作日后再进行入驻
							</view>
							<view class="upload-button" v-if="formData.shop_photo == ''" @click="chooseImage">
								<image src="../../static/images/add.png"></image>
							</view>
							<view class="upload-button" @click="chooseImage" v-else>
								<image :src="formData.shop_photo" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="section">
				<view class="section-title">店铺类型</view>
				<view class="section-content">
					<view class="form-items">
						<text class="label">店铺类型</text>
						<view class="group">
							<text :class="[formData.shop_type == 1?'active':'']"
								@click="formData.shop_type = 1">单店</text>
							<text :class="[formData.shop_type == 2?'active':'']"
								@click="formData.shop_type = 2">多店</text>
						</view>
					</view>
					<view class="form-items">
						<text class="label">店铺品牌</text>
						<view class="groupp">
							<text :class="[formData.shop_brand == 1?'active':'']"
								@click="formData.shop_brand = 1">无品牌</text>
							<text :class="[formData.shop_brand == 2?'active':'']"
								@click="formData.shop_brand = 2">自营品牌</text>
							<text :class="[formData.shop_brand == 3?'active':'']"
								@click="formData.shop_brand = 3">连锁品牌</text>
						</view>
					</view>
					<view class="form-items">
						<text class="label">店铺面积</text>
						<view class="groupm">
							<text :class="[formData.shop_area == 1?'active':'']"
								@click="formData.shop_area = 1">50平以下</text>
							<text :class="[formData.shop_area == 2?'active':'']"
								@click="formData.shop_area = 2">50-200平</text>
							<text :class="[formData.shop_area == 3?'active':'']"
								@click="formData.shop_area = 3">200-500平</text>
							<text :class="[formData.shop_area == 4?'active':'']"
								@click="formData.shop_area = 4">500平以上</text>
						</view>
					</view>
					<view class="form-items">
						<text class="label">需求(可多选)</text>
						<view class="groupx">
							<text v-for="(item,index) in needList" :key="index" :class="{'active': selectList.indexOf(item.label) != -1 }" @click="selectLists(item.label)">{{item.label}}</text>
						</view>
					</view>
					<view class="form-items">
						<view class="label">需求补充</view>
						<view class="textarea">
							<textarea placeholder-style="color:#787B8F" placeholder="请输入内容"
								v-model="formData.shop_add"></textarea>
						</view>
					</view>
				</view>
			</view>

			<view class="section">
				<view class="section-title">联系人信息</view>
				<view class="section-content section-contents">
					<view class="form-item">
						<text class="label">姓名</text>
						<input type="text" placeholder="请输入" class="input" v-model="formData.name" />
					</view>
					<view class="form-item">
						<text class="label">手机号码</text>
						<input type="number" placeholder="请输入" class="input" v-model="formData.phone" maxlength="11" />
					</view>
				</view>
			</view>
			<view class="footer" @click="submit">
				保存
			</view>
		</view>
		
		<view class="beijing" v-if="hidden"></view>
		<view class="tankuang" v-if="hidden">
			<view class="top">
				<view class="quxiao" @click="quxiao">取消</view>
				<view class="center">请选择</view>
				<view class="queren" @click="queren">确定</view>
			</view>
			<view class="bottom">
				<view :class="[xzId == item.category_id?'active':'']" @click="qiehuan(item.category_id)" v-for="(item,index) in shopClasses" :key="index">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/components/js_sdk/mmmm-image-tools/index.js'
	
	import {
		request
	} from '@/api/request';

	export default {
		data() {
			return {
				userData: [],
				formData: {
					user_id: '',
					team_id: '',
					shop_name: '',
					shop_address: '请选择',
					shop_class: '',
					shop_photo: '',
					shop_type: 1,
					shop_brand: 1,
					shop_area: 1,
					shop_need: '',
					shop_add: '',
					name: '',
					phone: '',
				},
				hidden: false,
				shopClasses: [],
				fenlei_name: '请选择',
				xzId: 0,
				needList: [{
					index: 1,
					label: '品牌宣传',
				}, {
					index: 2,
					label: '新店宣传',
				}, {
					index: 3,
					label: '新品宣传',
				}, {
					index: 4,
					label: '节日宣传',
				}, {
					index: 5,
					label: '活动宣传',
				}, {
					index: 6,
					label: '其他',
				}],
				selectList: [],
			}
		},
		created() {
			// 用户基本信息
			request({
				url: '/api/user/profile',
				method: 'GET',
				data: {},
				header: {
					'xx-token': uni.getStorageSync('token')
				}
			}).then((response) => {
				this.userData = response.data;
				
				this.formData.user_id = this.userData.id;
				this.formData.team_id = this.userData.team_id;
				
				this.getData(this.userData.id);
			}).catch((error) => {});
			
			// 获取分类
			uni.request({
				url: 'http://39.106.73.165:6605/api/category_list_one',
				data: {},
				method: 'POST',
				success: (res) => {
					if (res.data.code == 200) {
						this.shopClasses = res.data.result;
					}
				},
				fail(error) {
					uni.showToast({
						title: error,
						icon: 'none'
					})
				}
			})
		},
		methods: {
			getData(user_id){
				uni.request({
					url: 'http://39.106.73.165:6603/sj/get_business',
					data: {
						user_id: user_id,
					},
					method: 'POST',
					success: (res) => {
						if(res.data.data != null){
							this.formData = res.data.data;
							
							this.selectList = res.data.data.shop_need.split(',');
							
							for(let i=0;i<this.shopClasses.length;i++){
								if(this.shopClasses[i].category_id == res.data.data.shop_class){
									this.fenlei_name = this.shopClasses[i].name;
									this.xzId = this.shopClasses[i].category_id;
								}
							}
						}
					},
					fail(error) {
						uni.showToast({
							title: error,
							icon: 'none'
						})
					}
				})
			},
			submit() {
				this.formData.shop_need = this.selectList.join(',')
				
				if(this.formData.shop_name == ''){
					uni.showToast({
						title: '店铺名称不能为空',
						icon: 'none'
					})
					
					return false;
				}
				
				uni.request({
					url: 'http://39.106.73.165:6603/sj/insert_business',
					data: this.formData,
					method: 'POST',
					success: (res) => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						
						setTimeout(function(){
							uni.$emit('update',{msg:'页面更新'})
							
							uni.navigateBack()
						},2000)
					},
					fail(error) {
						uni.showToast({
							title: error,
							icon: 'none'
						})
					}
				})
			},
			selectLists(e) {
				if (this.selectList.indexOf(e) == -1) {
					this.selectList.push(e); // 选中添加到数组里(下标)
				} else {
					this.selectList.splice(this.selectList.indexOf(e), 1); // 取消
				}
			},
			qiehuan(id){
				this.xzId = id;
			},
			quxiao(){
				this.hidden = !this.hidden;
			},
			queren(){
				for(let i=0;i<this.shopClasses.length;i++){
					if(this.shopClasses[i].category_id == this.xzId){
						this.formData.shop_class = this.shopClasses[i].category_id;
						this.fenlei_name = this.shopClasses[i].name;
					}
				}
				
				this.hidden = !this.hidden;
			},
			chooseLocation() {
				let that = this;

				uni.chooseLocation({
					success: (res) => {
						that.formData.shop_address = res.address
					},
					fail: function(err) {

					}
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						let base64;
						pathToBase64(res.tempFilePaths[0])
							.then(base64 => {
								this.formData.shop_photo = base64;
							})
					},
				});
			},
			fanhui(){
				uni.navigateBack()
			}
		},
	};
</script>

<style scoped lang="scss">
	.business {
		width: 100%;

		.headtop {
			width: 100%;
			margin: 0 auto;
			position: relative;
			height: 176rpx;
			z-index: 90;

			.bj {
				width: 100%;
				height: 286rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			.headtitile {
				width: 94%;
				margin: 0 auto;
				position: absolute;
				top: 94rpx;
				left: 3%;

				image {
					width: 20rpx;
					height: 36rpx;
					float: left;
					margin-right: 18rpx;
					margin-top: -3rpx;
				}

				text {
					height: 36rpx;
					line-height: 36rpx;
					font-size: 32rpx;
					color: #FFFFFF;
					float: left;
				}
			}
		}

		.container {
			width: 94%;
			margin: 0 auto;
			position: absolute;
			left: 3%;
			z-index: 95;
			padding-bottom: 150rpx;

			.section {
				width: 100%;
				margin-bottom: 20rpx;

				.section-title {
					font-size: 24rpx;
					color: #FFFFFF;
					margin-bottom: 20rpx;
				}

				.section-content {
					width: 100%;
					background: #242831;
					border-radius: 10rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					padding-bottom: 20rpx;

					.form-item {
						width: 100%;
						box-sizing: border-box;
						height: 88rpx;
						line-height: 88rpx;
						border-bottom: 1rpx solid #31353E;

						.label {
							float: left;
							font-size: 30rpx;
							color: #FFFFFF;
							width: 30%;
						}

						.input {
							float: right;
							text-align: right;
							color: #ABB0CC;
							font-size: 30rpx;
							height: 88rpx;
							line-height: 88rpx;
							width: 65%;
						}

						.xuanze {
							float: right;
							height: 88rpx;
							line-height: 88rpx;
							width: 65%;

							.name {
								font-size: 30rpx;
								color: #ABB0CC;
								width: 94%;
								float: left;
								text-align: right;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.tb {
								width: 15rpx;
								height: 28rpx;
								float: right;
								margin-top: 30rpx;
							}
						}
					}

					.form-item:last-child {
						border: none;
					}

					.form-items {
						width: 100%;

						.label {
							font-size: 30rpx;
							color: #FFFFFF;
							height: 88rpx;
							line-height: 88rpx;
						}

						.upload-area {
							width: 100%;

							.upload-tip {
								font-size: 24rpx;
								color: #787B8F;
								line-height: 30rpx;
							}

							.upload-button {
								width: 150rpx;
								height: 150rpx;
								margin-top: 24rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}

						.group {
							width: 100%;
							margin-bottom: 20rpx;

							text {
								height: 60rpx;
								line-height: 60rpx;
								font-size: 24rpx;
								color: #FFFFFF;
								background: #242831;
								border: 2rpx solid #FFFFFF;
								padding: 0 32rpx;
								display: inline-block;
								margin-right: 20rpx;
							}

							.active {
								border: none;
								background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
								color: #806B1A;
								height: 64rpx;
								line-height: 64rpx;
							}
						}

						.groupp {
							width: 100%;
							margin-bottom: 20rpx;

							text {
								height: 60rpx;
								line-height: 60rpx;
								font-size: 24rpx;
								color: #FFFFFF;
								background: #242831;
								border: 2rpx solid #FFFFFF;
								padding: 0 30rpx;
								display: inline-block;
								margin-right: 20rpx;
							}

							.active {
								border: none;
								background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
								color: #806B1A;
								height: 64rpx;
								line-height: 64rpx;
							}
						}

						.groupm {
							width: 100%;
							margin-bottom: 20rpx;

							text {
								height: 60rpx;
								line-height: 60rpx;
								font-size: 24rpx;
								color: #FFFFFF;
								background: #242831;
								border: 2rpx solid #FFFFFF;
								padding: 0 16rpx;
								display: inline-block;
								margin-right: 20rpx;
							}

							.active {
								border: none;
								background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
								color: #806B1A;
								height: 64rpx;
								line-height: 64rpx;
							}
						}

						.groupx {
							width: 100%;

							text {
								height: 60rpx;
								line-height: 60rpx;
								font-size: 24rpx;
								color: #FFFFFF;
								background: #242831;
								border: 2rpx solid #FFFFFF;
								width: 150rpx;
								text-align: center;
								display: inline-block;
								margin-right: 20rpx;
								margin-bottom: 20rpx;
							}

							.active {
								border: none;
								background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
								color: #806B1A;
								height: 64rpx;
								line-height: 64rpx;
								width: 154rpx;
							}
						}

						.textarea {
							width: 100%;
							margin: 0 auto;
							background: #242831;
							border-radius: 10rpx;
							border: 1rpx solid #454B57;

							textarea {
								width: 100%;
								height: 120rpx;
								padding: 20rpx;
								box-sizing: border-box;
								font-size: 24rpx;
								color: #787B8F;
							}
						}
					}
				}
				
				.section-contents {
					padding-bottom: 0;
				}
			}
		}
		
		.beijing {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background: #000;
			opacity: 0.5;
			z-index: 100;
		}
		
		.tankuang {
			width: 100%;
			height: 800rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 110;
			background: #242831;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
		
			.top {
				width: 94%;
				margin: 0 auto;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				position: relative;
		
				.center {
					font-size: 30rpx;
					color: #FFFFFF;
				}
		
				.quxiao {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 30rpx;
					color: #999999;
				}
		
				.queren {
					position: absolute;
					top: 0;
					right: 0;
					font-size: 30rpx;
					color: #ECDEA4;
				}
			}
		
			.bottom {
				width: 94%;
				margin: 0 auto;
				margin-top: 20rpx;
				height: 660rpx;
				overflow-y: scroll;
		
				view {
					width: 100%;
					height: 76rpx;
					line-height: 76rpx;
					text-align: center;
					font-size: 30rpx;
					color: #CCCCCC;
				}
		
				.active {
					font-size: 30rpx;
					color: #806B1A;
					background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
					border-radius: 10rpx;
				}
			}
		}

		.footer {
			width: 100%;
			margin: 0 auto;
			text-align: center;
			margin-top: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 10rpx;
			background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
			color: #806B1A;
			font-size: 36rpx;
		}
	}
</style>